<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    >
      <template #btns>
        <el-button
          v-if="meta.indexOf('SpecialCardSellInfoExport') > -1"
          :loading="exportLoading"
          type="primary"
          @click="handleExport"
        >{{ $t('message.daochu') }}</el-button>
      </template>
    </QueryForm>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column
        align="center"
        :label="$t('message.zxkh')"
        min-width="100"
        prop="id"
        show-overflow-tooltip
      />
      <el-table-column
        v-for="item in propList"
        :key="item.label"
        align="center"
        :label="item.label"
        :min-width="item.minWidth"
        show-overflow-tooltip
        :prop="item.prop"
      />
      <el-table-column
        align="center"
        :label="$t('message.zxkzt')"
        min-width="100"
        prop="status"
        fixed="right"
      >
        <template v-slot="scope">
          <span v-if="scope.row.status === '0'">{{ $t('message.dsy') }}</span>
          <span v-if="scope.row.status === '1'">{{ $t('message.ysy') }}</span>
          <span v-if="scope.row.status === '2'" class="red">{{ $t('message.zuofei') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @SizeChange="pageSizeChange"
      @current-change="getList"
    />
    <orderDetail ref="orderDetail" />
  </div>
</template>

<script>
import {
  specialCardSaleRecord,
  specialCardSaleRecordEx
} from '@/api'
// import { parseTime } from '@/utils'
import Paginations from '@/components/paginations/paginations'
import QueryForm from '@/components/QueryForm'
import orderDetail from './detail.vue'
import { TJshortcuts } from '@/utils/config'
export default {
  name: 'TicketOrder',
  components: {
    QueryForm,
    orderDetail,
    Paginations
  },
  data() {
    return {
      exportLoading: false,
      queryFormConfig: {
        formItems: [
          {
            filed: 'id',
            type: 'input',
            label: this.$t('message.zxkh'),
            clearable: true
          },
          {
            filed: 'haveMember',
            type: 'input',
            label: this.$t('message.cyhy2'),
            placeholder: this.$t('message.hy2'),
            clearable: true
          },
          {
            filed: 'name',
            type: 'input',
            label: this.$t('message.zxk')
          },
          {
            filed: 'buyMember',
            type: 'input',
            label: this.$t('message.gmhy'),
            placeholder: this.$t('message.hy2')
          },
          {
            filed: 'status',
            type: 'select',
            label: this.$t('message.status'),
            options: [
              { label: this.$t('message.dsy'), value: '0' },
              { label: this.$t('message.ysy'), value: '1' },
              { label: this.$t('message.yzf'), value: '2' }
            ]
          },
          {
            filed: 'selTime',
            label: this.$t('message.createTime'),
            type: 'daterange',
            clearable: true,
            pickerOptions: {
              shortcuts: TJshortcuts
            }
          }
        ],
        online: true
      },
      propList: [
        // { label: this.$t('message.zxkh'), prop: '', minWidth: 100 },
        { label: this.$t('message.zxkmc'), prop: 'name', minWidth: 120 },
        { label: this.$t('message.beijin'), prop: 'cardPrice', minWidth: 70 },
        { label: this.$t('message.zejin'), prop: 'givePrice', minWidth: 70 },
        { label: this.$t('message.gmhy'), prop: 'buyMemberInfo', minWidth: 240 },
        { label: this.$t('message.dqcyhy'), prop: 'haveMemberInfo', minWidth: 240 },
        { label: this.$t('message.ddh'), prop: 'orderId', minWidth: 160 },
        { label: this.$t('message.createTime'), prop: 'createTime', minWidth: 160 },
        { label: this.$t('message.sysj'), prop: 'useTime', minWidth: 160 }
      ],
      meta: [],
      payMessage: {},
      list: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: true,
      payTypes: [],
      orderStatuss: [
        { value: '0', label: this.$t('message.dzf') },
        { value: '1', label: this.$t('message.cswzf') },
        { value: '2', label: this.$t('message.qxzf') },
        { value: '3', label: this.$t('message.zfcg') },
        { value: '4', label: this.$t('message.tkz') },
        { value: '5', label: this.$t('message.tkcg') }
      ],
      filters: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
      }
      if (filters.selTime) {
        filters.startTime = filters.selTime[0]
        filters.endTime = filters.selTime[1]
      } else {
        filters.startTime = ''
        filters.endTime = ''
      }
      this.listLoading = true
      specialCardSaleRecord({
        pagination, param: {
          ...filters
        }
      }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    handleExport() {
      const { filters } = this
      if (filters.selTime) {
        filters.startTime = filters.selTime[0]
        filters.endTime = filters.selTime[1]
      } else {
        filters.startTime = ''
        filters.endTime = ''
      }
      this.exportLoading = true
      specialCardSaleRecordEx({
        param: {
          ...filters,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            const a = document.createElement('a') // 创建一个a标签元素
            a.style.display = 'none' // 设置元素不可见
            a.href = res.record.showUrl // 设置下载地址
            document.body.appendChild(a) // 加入
            a.click() // 触发点击,下载
            document.body.removeChild(a) //
            this.$message.success(this.$t('message.dccg'))
          }
        })
        .catch(() => {
          this.exportLoading = false
        })
    },
    handleDetail(id) {
      this.$refs.orderDetail.getTicketOrderDetail(id)
    },
    nameWithPayMethod(payM) {
      const temp = this.payTypes.find(item => item.value === payM)
      return temp ? temp.name : ''
    },
    orderStatus(status) {
      const temp = this.orderStatuss.find(item => item.value === status)
      return temp ? temp.label : ''
    },
    clear() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>

<style lang='scss' scoped>
.division-line {
  text-align: center;
  display: inline-block;
  color: #999;
  width: 20px;
}
.pay-style {
  min-width: 80px;
  padding-left: 5px;
  padding-right: 5px;
  height: 30px;
  font-size: 15px;
  line-height: 1px;
  vertical-align: middle;
}
.slelect-pay-style {
  background-color: #1943a9;
  color: #fff;
}
.normal-pay-style {
  border: 1px solid #d8d8d8;
  background-color: #fff;
  color: #222;
}
.messgae-style {
  color: #dd0707;
}
.price-style {
  font-size: 17px;
  font-weight: 500;
}
.unit-style {
  margin-right: 20px;
}
.bottom-speace-style {
  margin-bottom: 10px;
}
.card-message {
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  .bottom-left {
    margin-left: 20px;
    height: 20px;
    margin-top: 15px;
    .sum-title-style {
      font-size: 15px;
      color: #222;
    }
    .sum-pay-value-style {
      font-size: 17px;
      font-weight: 500;
      color: #dd0707;
    }
    .dis-title-style {
      font-size: 14px;
      color: #222;
    }
    .discoun-style {
      font-size: 16px;
      color: #dd0707;
    }
  }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle;
    }
  }
}
</style>
